{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>登陆</title>
    <link rel="stylesheet" href="{% static 'Lowin/auth.css' %}">
    <style>
        .error{
            color: red;
        }
        .n{
            display: none;
        }
    </style>
</head>
<body>
    <div class="lowin">
        <div class="lowin-brand">
            <img src="{% static 'Lowin/kodinger.jpg' %}" alt="logo">
        </div>
        <div class="lowin-wrapper" style="min-height: 442px;">
            <div class="lowin-box lowin-login" style="display: block;">
                <div class="lowin-box-inner">
                    <span id="error" class="error"></span>
                    <div class="lowin-group">
                        <label for="user">用户名
                            <span class="error n">请输入用户名</span>
                        </label>
                        <input id="user" type="text" autocomplete="off" name="user" class="lowin-input">
                    </div>
                    <div class="lowin-group">
                        <label for="password">密码
                            <span class="error n">请输入密码</span>
                        </label>
                        <input id="password" type="password" autocomplete="off" name="password" class="lowin-input">
                    </div>
                    <button id="but" class="lowin-btn login-btn">登陆</button>
                    <div class="text-foot">
                        还没有账号? <a href="{% url 'select:register' %}" class="register-link">去注册</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="{% static 'js/jquery.js' %}"></script>
    <script>
        $(function () {
            $('#but').click(function () {
                var flag = true;
                $('input[name="user"],input[name="password"]').each(function(){
                   var value = $(this).val();
                   if (value === ''){
                       if ($(this).attr('name') === 'user'){
                           $(this).siblings().children().removeClass('n');
                           flag = false;
                       }else{
                           $(this).siblings().children().removeClass('n');
                           flag = false;
                       }
                   }
                });
                if (flag){
                    $.ajax({
                        url: '/login/',
                        type: 'POST',
                        data: {user: $('#user').val(), password: $('#password').val(), csrfmiddlewaretoken: '{{csrf_token}}'},
                        success: function (msg) {
                            if (msg.status){
                                location.href = '{% url 'select:index' %}';
                            }else{
                                document.getElementById('error').innerText = msg.error;
                            }
                        },
                    });
                }
            })
        })
    </script>
</body>
</html>